<template>
	<view class="content">
		<headerNav title="供应链"></headerNav>
		<view class="main-box">
			<view class="box flex">
				<input type="text" class="ipt left-ipt" placeholder="开始时间" v-model="startDate" :disabled="true" @click="selDate(1)">
				<view class="line">—</view>
				<input type="text" class="ipt right-ipt" placeholder="结束时间" v-model="endDate" :disabled="true" @click="selDate(2)">
				<view class="icon-btn">
					<uni-icons type="calendar" size="52rpx" :color="baseColor"></uni-icons>
				</view>
			</view>
			<view class="box flex search-box" @click="showcondition=!showcondition">
				<uni-icons type="search" size="52rpx" color="#8695AA"></uni-icons>
				<input class="search-ipt" type="text" :disabled="true" v-model="condition" placeholder="查询">
				<view class="search-main" v-show="showcondition">
					<view class="con-item">
						<view class="con-title">板块</view>
						<view class="con-select">
							<uni-data-select v-model="plate" :localdata="plateData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">省</view>
						<view class="con-select">
							<uni-data-select v-model="province" :localdata="provinceData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">市</view>
						<view class="con-select">
							<uni-data-select v-model="city" :localdata="cityData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">区</view>
						<view class="con-select">
							<uni-data-select v-model="area" :localdata="areaData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">门店</view>
						<view class="con-select">
							<uni-data-select v-model="store" :localdata="storeData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
				</view>
			</view>
			<view class="box chart-box">
				<view class="box-title">总销售量</view>
				<view class="chart-main">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData"></qiun-data-charts>
				</view>
			</view>
			<view class="box chart-box">
				<view class="box-title">新门店数量</view>
				<view class="chart-main">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2"></qiun-data-charts>
					<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3"></qiun-data-charts>
					<view class="arcbar-tip">
						<view class="tip-item flex flex-center">
							<view class="tip-circle" :style="{'backgroundColor':opts3.color[0]}"></view>
							<view class="tip-title">往期产品销量:11000</view>
						</view>
						<view class="tip-item flex flex-center">
							<view class="tip-circle" :style="{'backgroundColor':opts3.color[1]}"></view>
							<view class="tip-title">新增产品销量:5000</view>
						</view>
					</view>
				</view>
			</view>
			<view class="grid-box">
				<view class="grid-item">
					<view class="grid-title">实付总额</view>
					<view class="grid-value">4592</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">122 <image src="../../static/img/up.png" class="up-icon"></image></view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">实际成本总额</view>
					<view class="grid-value">4592</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">122 <image src="../../static/img/up.png" class="up-icon"></image></view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">提成总额</view>
					<view class="grid-value">4592</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">122 <image src="../../static/img/up.png" class="up-icon"></image></view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">实际营收总额</view>
					<view class="grid-value">4592</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">122 <image src="../../static/img/up.png" class="up-icon"></image></view></view>
				</view>
			</view>
		</view>
		<uni-calendar :lunar="false" ref="calendarRef" :insert="false" @confirm="getdate"></uni-calendar>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref,watch } from 'vue';
	import {getProvince,getCity,getArea} from "@/api/public"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import { tip,goto } from '../../utils/utils';
	const startDate = ref("")
	const endDate = ref("")
	let dateType = 1
	const calendarRef = ref()
	const showcondition = ref(false)
	const plate = ref(0)
	const plateData = ref([
		{text:'供应链',value:1},
		{text:'直营',value:2}
	])
	type dataCom = {
		text:string,
		value:number
	}
	const province = ref(0)
	const provinceData = ref<dataCom[]>([])
	const city = ref(0)
	const cityData = ref<dataCom[]>([])
	watch(province,(newval:number)=>{
		if(newval>0){
			getCity({province_id:newval}).then((res:any)=>{
				cityData.value = res.data.map((item:any)=>{
					return {
						text:item.city_name,
						value:item.city_id
					}
				})
			})
		}
	})
	const area = ref(0)
	const areaData = ref<dataCom[]>([])
	watch(city,(newval:number)=>{
		if(newval>0){
			getArea({city_id:newval}).then((res:any)=>{
				areaData.value = res.data.map((item:any)=>{
					return {
						text:item.area_name,
						value:item.area_id
					}
				})
			})
		}
	})
	const store = ref(0)
	const storeData = ref<dataCom[]>([])
	watch(area,(newval:number)=>{
		if(newval>0){
			console.log('获取地区门店')
		}
	})
	const condition = computed(()=>{
		let platev = dataTxt(plate.value,plateData.value)
		let provincev = dataTxt(province.value,provinceData.value)
		let cityv = dataTxt(city.value,cityData.value)
		let areav = dataTxt(area.value,areaData.value)
		let storev = dataTxt(store.value,storeData.value)
		console.log(areav)
		return (platev?platev+'-':"")+
				(provincev?provincev+'-':"")+
					(cityv?cityv+'-':"")+
						(areav?areav+'-':"")+
							(storev?storev:"")
	})
	const selDate = (e:number)=>{
		dateType = e
		setTimeout(()=>{
			calendarRef.value.open()
		},300)
	}
	const getdate = (e:any)=>{
		if(dateType==1){
			startDate.value = e.fulldate
		}
		else{
			endDate.value = e.fulldate
		}
	}
	const dataTxt = (val:number,dataArr:dataCom[])=>{
		let res = dataArr.filter((item:any)=>{return item.value==val})
		return res[0]?res[0].text:""
	}
	const chartData = ref({})	//图表数据
	const opts = ref({
		color:["#8D4EDA","#00B2FF","#165DFF"],
		title: {
			name: "",
			fontSize: 24,
			color: "#1D2129"
		},
		subtitle: {
			name: "",
			fontSize: 14,
			color: "#F53F3F"
		},
		dataLabel:false,
		legend:{
			position:"bottom"
		},
	})
	const chartData2 = ref({})	//图表数据
	const opts2 = ref({
		color:["#8D4EDA","#00B2FF","#165DFF"],
		title: {
			name: "",
			fontSize: 24,
			color: "#1D2129"
		},
		subtitle: {
			name: "",
			fontSize: 14,
			color: "#F53F3F"
		},
		dataLabel:false,
		legend:{
			position:"bottom"
		},
	})
	const chartData3 = ref({})	//图表数据
	const opts3 = ref({
		color:["#165DFF","#00B2FF"],
		title: {
			name: "",
		},
		subtitle: {
			name: "",
		},
		dataLabel:false,
		legend:{
			position:"bottom",
			show:true
		},
	})
	onShow(()=>{
		//登录检测
		let token = uni.getStorageSync('token')
		if(!token){
			return tip('请先登录',()=>{
				goto('index/login')
			})
		}
	})
	onLoad(()=>{
		getProvince().then((res:any)=>{
			provinceData.value = res.data.map((item:any)=>{
				return {
					text:item.province_name,
					value:item.province_id
				}
			})
		})
		//图表数据
		let data = [
			{name:'产品A',value:11000},
			{name:'产品B',value:5000},
			{name:'产品C',value:1000},
		]
		let res = {
			series: [
				{
					data: data
				}
			]
		}
		chartData.value = JSON.parse(JSON.stringify(res))
		opts.value.title.name = (data.reduce((sum,current)=>sum+current.value,0)).toString()
		opts.value.subtitle.name = "较上月 206.32↑"
		
		//图表数据2
		let data2 = [
			{name:'产品A',value:11000},
			{name:'产品B',value:5000},
			{name:'产品C',value:1000},
		]
		let res2 = {
			series: [
				{
					data: data2
				}
			]
		}
		chartData2.value = JSON.parse(JSON.stringify(res2))
		opts2.value.title.name = (data.reduce((sum,current)=>sum+current.value,0)).toString()
		opts2.value.subtitle.name = "较上月 206.32↑"
		
		//图表数据2
		let data3 = [
			{name:'往期产品销量',data:0.8},
			{name:'新增产品销量',data:0.5},
		]
		let res3 = {
			series:data3
		}
		chartData3.value = JSON.parse(JSON.stringify(res3))
	})
</script>

<style lang="scss">
	.content{
		padding:0 26rpx 40rpx;
		.main-box{
			margin-top: 20rpx;
			.box{
				padding: 14rpx 24rpx;
				border-radius: 4rpx;
				background-color: #F0F9FF;
				margin-bottom:16rpx;
				.ipt{
					height:44rpx;
					width:280rpx;
					font-size:28rpx;
					text-align:center;
					line-height:44rpx;
				}
				.line{
					color:#86909C;
					width:20rpx;
					line-height:44rpx;
				}
				.search-ipt{
					padding-left:4rpx;
					width:100%;
					height:44rpx;
					font-size:28rpx;
					line-height:44rpx;
				}
				.box-title{
					height: 46rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #1D252F;
					line-height: 48rpx;
				}
			}
			.chart-box{
				padding:32rpx 40rpx;
				.arcbar-tip{
					margin-top:20rpx;
					.tip-item{
						font-size:28rpx;
						margin-bottom: 20rpx;
						.tip-circle{
							width:24rpx;
							height:24rpx;
							border-radius:12rpx;
							margin-right:20rpx;
						}
						.tip-title{
							color:#4E5969;
						}
					}
				}
			}
			.search-box{
				position:relative;
				.search-main{
					position:absolute;
					left:0;
					top:72rpx;
					background:#fff;
					width:700rpx;
					padding:22rpx 0;
					.con-item{
						margin-bottom:60rpx;
						.con-title{
							font-size:28rpx;
						}
						.con-select{
							margin-top:16rpx;
							width: 702rpx;
							height: 64rpx;
							background: #F2F3F5;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}
				}
			}
			.grid-box{
				margin-top:40rpx;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;
				grid-gap: 40rpx;
				.grid-item{
					background-image: linear-gradient(to bottom,#F2F2FE,#E6F0FE);
					border-radius:8rpx;
					text-align:center;
					padding:32rpx;
					.grid-title{
						font-size:32rpx;
						color:#1D252F;
					}
					.grid-value{
						font-size:48rpx;
						margin-top:48rpx;
						color:#1D252F;
						font-weight:800;
					}
					.grid-up{
						font-size:24rpx;
						color:#4E5969;
						.up-value{
							color:#F53F3F;
							.up-icon{
								width: 24rpx;
								height:24rpx;
								margin-left:8rpx;
							}
						}
					}
				}
				.grid-item:last-child{
					background-image: linear-gradient(to bottom,#F2FEFB,#E6FEF7);
				}
			}
		}
	}
</style>
